<template>
  <div
    class="display"
    v-loading="loading"
    element-loading-background="rgba(255, 255, 255, 0)"
  >
    <el-form ref="Form" :model="pageDetails" label-width="120px">
      <!-- <el-form-item label="首页显示">
        <el-row>
          <el-col :span="4" v-for="(item1, i1) in homeList" :key="i1">
            <el-switch v-model="value1"></el-switch>
            <span>{{ item1 }}</span>
          </el-col>
        </el-row>
      </el-form-item> -->

      <el-form-item label="投票显示">
        <el-checkbox-group
          v-model="contestantListSelected"
          @change="handleList"
        >
          <el-checkbox
            v-for="item in contestantList"
            :label="item.value"
            :key="item.value"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="选手详情">
        <div class="player_wrap">
          <div class="details_wrap">
            <el-checkbox-group
              v-model="contestantDetailSelected"
              @change="handleDetail"
            >
              <el-checkbox
                v-for="item in contestantDetail"
                @change="handleChange($event, item)"
                :label="item.value"
                :key="item.value"
                >{{ item.name }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="cancass_wrap" v-if="showdcancass">
            <div>拉票按钮名称</div>
            <div
              class="input_wrap"
              v-if="pageDetails.contestantDetailComponent"
            >
              <el-input
                v-model="pageDetails.contestantDetailComponent.pullButtonText"
                placeholder="请输入"
                @change="handlePullButtonText"
              ></el-input>
            </div>
          </div>
          <div class="style_wrap">
            <div>选手图片</div>
            <div
              class="radio_wrap"
              v-if="pageDetails.contestantDetailComponent"
            >
              <el-radio-group
                v-model="pageDetails.contestantDetailComponent.coverStyle"
                @change="handleCoverStyle"
              >
                <el-radio
                  v-for="item in contestantDetailStyleList"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="排行榜">
        <el-checkbox-group v-model="contestantRankingSelected" @change="handleContestantRankingSelected">
          <el-checkbox
            v-for="item in contestantRankingList"
            :label="item.value"
            :key="item.value"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="统计展示">
        <el-checkbox-group v-model="contestantCountSelected" @change="handleContestantCountSelected">
          <el-checkbox
            v-for="item in contestantCountList"
            :label="item.value"
            :key="item.value"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="排版显示">
        <div class="choose_wrap">
          <div class="choose_item">
            <div class="choose_title">分组列数</div>
            <div>
              <el-radio-group
                @change="handleGroupColumnNum"
                v-if="pageDetails.contestantListComponent && pageDetails.contestantListComponent.layout"
                v-model="
                  pageDetails.contestantListComponent.layout.groupColumnNum
                "
              >
                <el-radio
                  v-for="item in layoutGroupColumnNumList"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <div class="choose_item">
            <div class="choose_title">选手列数</div>
            <div>
              <el-radio-group
                @change="handleContestantColumnNum"
                v-if="pageDetails.contestantListComponent && pageDetails.contestantListComponent.layout"
                v-model="
                  pageDetails.contestantListComponent.layout.contestantColumnNum
                "
              >
                <el-radio
                  v-for="item in layoutContestantColumnNumList"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <div class="choose_item">
            <div class="choose_title">选手排序</div>
            <div>
              <el-radio-group
              v-if="pageDetails.contestantListComponent && pageDetails.contestantListComponent.layout"
                @change="handleGroupSort"
                v-model="pageDetails.contestantListComponent.layout.sort"
              >
                <el-radio
                  v-for="item in layoutSortList"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
          <div class="choose_item">
            <div class="choose_title">选手图片</div>
            <div>
              <el-radio-group
              v-if="pageDetails.contestantListComponent && pageDetails.contestantListComponent.layout"
                @change="handleGroupArrangement"
                v-model="pageDetails.contestantListComponent.layout.arrangement"
              >
                <el-radio
                  v-for="item in layoutArrangementList"
                  :key="item.value"
                  :label="item.value"
                  >{{ item.name }}</el-radio
                >
              </el-radio-group>
            </div>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      //投票页面列表
      contestantList: [], //投票页面列表
      contestantListSelected: [], //投票页面已选
      //laypout
      layoutArrangementList: [],
      layoutContestantColumnNumList: [],
      layoutGroupColumnNumList: [],
      layoutSortList: [],
      //选手详情列表
      contestantDetail: [],
      contestantDetailSelected: [],
      contestantDetailStyleList: [],
      //排行榜
      contestantRankingList: [],
      contestantRankingSelected: [],
      //统计
      contestantCountList: [],
      contestantCountSelected: [],

      pageDetails: [],
      showdcancass: false,
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  created() {
    this.getPageById();
    //投票显示
    this.contestantListComponent();
    //layout
    this.layoutArrangement();
    this.layoutContestantColumnNum();
    this.layoutGroupColumnNum();
    this.layoutSort();
    //选手详情
    this.contestantDetailComponent();
    this.contestantDetailStyle();
    //排行榜
    this.contestantRankingListComponent();
    //统计
    this.contestantCountListComponent();
  },
  methods: {
    getPageById() {
      this.$api("page.getPageById", {
        voteId: this.$route.query.id,
      }).then((res) => {
        //投票显示
        const listElement = res.contestantListComponent.element;
        for (let k in listElement) {
          if (listElement[k]) {
            this.contestantListSelected.push(k);
          }
        }
        //选手详情
        const detailsElement = res.contestantDetailComponent.element;
        for (let k in detailsElement) {
          if (detailsElement[k]) {
            this.contestantDetailSelected.push(k);
          }
        }
        //排行榜
        const rankingElement = res.contestantRankingListComponent.element;
        for (let k in rankingElement) {
          if (rankingElement[k]) {
            this.contestantRankingSelected.push(k);
          }
        }
        //统计
        const countElement = res.countComponent.element;
        for (let k in countElement) {
          if (countElement[k]) {
            this.contestantCountSelected.push(k);
          }
        }

        this.showdcancass = detailsElement.PULL_BUTTON;
        this.pageDetails = res;
      });
    },
    //获取投票页面列表
    contestantListComponent() {
      this.$api("page.contestantListComponent").then((res) => {
        this.contestantList = res;
      });
    },
    //选手图片
    contestantDetailStyle() {
      this.$api("page.contestantDetailStyle").then((res) => {
        this.contestantDetailStyleList = res;
      });
    },
    //排行榜
    contestantRankingListComponent() {
      this.$api("page.contestantRankingListComponent").then((res) => {
        this.contestantRankingList = res;
      });
    },
    //获取选手详情列表
    contestantDetailComponent() {
      this.$api("page.contestantDetailComponent").then((res) => {
        this.contestantDetail = res;
      });
    },
    //统计
    contestantCountListComponent() {
      this.$api("page.contestantCountListComponent").then((res) => {
        this.contestantCountList = res;
      });
    },
    saveApi() {
      //投票页面
      const listElement = this.filterList(
        this.contestantList,
        this.contestantListSelected
      );
      //投票页面
      const detailsElement = this.filterList(
        this.contestantDetail,
        this.contestantDetailSelected
      );
      //排行榜
      const rankingElement = this.filterList(
        this.contestantRankingList,
        this.contestantRankingSelected
      );
      //统计
      const countElement = this.filterList(
        this.contestantCountList,
        this.contestantCountSelected
      );
      this.pageDetails.contestantDetailComponent.element = detailsElement;
      this.pageDetails.contestantDetailComponent.pullButtonText = this.pageDetails.contestantDetailComponent.pullButtonText.trim();
      this.pageDetails.contestantListComponent.element = listElement;
      this.pageDetails.contestantRankingListComponent.element = rankingElement;
      this.pageDetails.countComponent.element = countElement;
      console.log(this.pageDetails);
      this.$api("page.save", {
        ...this.pageDetails,
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.$message({
          message: "保存成功",
          type: "success",
          duration: 1000,
        });
      });
    },
    //投票显示
    handleList() {
      this.saveApi();
    },
    //选手详情
    handleDetail() {
      this.saveApi();
    },
    handleContestantRankingSelected(){
      this.saveApi();
    },
    handleContestantCountSelected(){
      this.saveApi();
    },
    //选手图片
    handleCoverStyle() {
      this.saveApi();
    },
    //分组列数
    handleGroupColumnNum() {
      this.saveApi();
    },
    //选手列数
    handleContestantColumnNum() {
      this.saveApi();
    },
    //选手排序
    handleGroupSort() {
      this.saveApi();
    },
    //选手图片
    handleGroupArrangement() {
      this.saveApi();
    },
    //拉票按钮名称
    handlePullButtonText() {
      if (this.pageDetails.contestantDetailComponent.pullButtonText.trim()) {
        this.saveApi();
      } else {
        this.$message({
          message: "请输入拉票按钮名称",
          type: "error",
          duration: 1000,
        });
      }
    },
    //过滤checkBox并返回对象
    filterList(list1, list2) {
      const listElement = {};
      for (let k of list1) {
        list2.findIndex((ele) => ele === k.value) !== -1
          ? (listElement[k.value] = true)
          : (listElement[k.value] = false);
      }
      return listElement;
    },
    handleChange(val, item) {
      if (item.value === "PULL_BUTTON") {
        this.showdcancass = val;
      }
    },
    //layout-arrangement
    layoutArrangement() {
      this.$api("page.layoutArrangement").then((res) => {
        res.forEach((item) => {
          item.label = item.name;
        });
        this.layoutArrangementList = res;
      });
    },
    //layout-contestantColumnNum
    layoutContestantColumnNum() {
      this.$api("page.layoutContestantColumnNum").then((res) => {
        res.forEach((item) => {
          item.label = item.name;
        });
        this.layoutContestantColumnNumList = res;
      });
    },
    //layout-groupColumnNum
    layoutGroupColumnNum() {
      this.$api("page.layoutGroupColumnNum").then((res) => {
        res.forEach((item) => {
          item.label = item.name;
        });
        this.layoutGroupColumnNumList = res;
      });
    },
    //layout-sort
    layoutSort() {
      this.$api("page.layoutSort").then((res) => {
        res.forEach((item) => {
          item.label = item.name;
        });
        this.layoutSortList = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.display {
  width: 820px;
  min-height: 550px;
  ::v-deep.el-form-item__label {
    padding-right: 40px;
  }
  span {
    margin-left: 10px;
    color: $deactiveColor;
  }
  p {
    margin: 0;
  }
  ::v-deep.el-input__inner {
    height: 30px;
    width: 120px;
    text-align: center;
  }
  .choose_wrap {
    .choose_item {
      display: flex;
      align-items: center;
      .choose_title {
        margin-right: 30px;
      }
    }
  }
  .player_wrap {
    .cancass_wrap {
      display: flex;
      .input_wrap {
        width: 200px;
        margin-left: 30px;
      }
    }
    .style_wrap {
      display: flex;
      .radio_wrap {
        margin-left: 30px;
      }
    }
  }
}
</style>
